<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图书借记管理系统</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
  <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
  <style type="text/css">
    *{
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">图书借记管理系统 @iurac</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;" style="font-size: large;color: white;">
          ${sessionScope.userInfo.username}
        </a>
        <dl class="layui-nav-child">
          <dd><a onclick="showMe()">个人资料</a></dd>
          <dd><a onclick="editPassword()">修改密码</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/logout.do">退出登录</a></li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll" >
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="test">
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/toHome.do" target="body">主页</a></li>
        <li class="layui-nav-item  layui-nav-itemed">
          <a href="javascript:;">图书借还</a>
          <dl class="layui-nav-child">
            <dd><a href="${pageContext.request.contextPath}/toStatus.do" target="body">借阅情况</a></dd>
            <dd><a href="${pageContext.request.contextPath}/toHistory.do" target="body">借阅历史</a></dd>
          </dl>
        </li>
        <c:if test="${sessionScope.userInfo.role == '超级管理员'}">
          <li class="layui-nav-item  layui-nav-itemed">
            <a class="" href="javascript:;">系统管理</a>
            <dl class="layui-nav-child">
              <dd><a href="${pageContext.request.contextPath}/toBook.do" target="body">图书管理</a></dd>
              <dd><a href="${pageContext.request.contextPath}/toUser.do" target="body">用户管理</a></dd>
              <dd><a href="${pageContext.request.contextPath}/toDictionary.do" target="body">数据字典</a></dd>
            </dl>
          </li>
        </c:if>
        <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/toDateShow.do" target="body">数据展示</a></li>
      </ul>
    </div>
  </div>

  <div class="layui-body" style="display: flex;justify-content: center">
    <!-- 内容主体区域 -->
    <iframe src="${pageContext.request.contextPath}/toHome.do" name="body" height="100%" width="100%" ></iframe>
  </div>

  <div class="layui-footer" style="text-align: center">
    <!-- 底部固定区域 -->
    <p style="color: #7e7e7e;font-size: 10px">图书借记管理系统 @GDPU - Iurac</p>
  </div>
</div>

<script>
  //JavaScript代码区域
  layui.use('element', function(){
    var element = layui.element;

  });

  function showMe(){
    layer.open({
      type: 1,
      area: ['680px', '360px'],
      shadeClose: true,
      title: "个人信息",
      btn:['修改手机号','取消'],
      content: $("#showMeFrame"),
      success: function (index,layero){
        $.ajax({
          url:"${pageContext.request.contextPath}/user/getBorrowCountById.do",
          type:"get",
          data:{
            "id": "${sessionScope.userInfo.id}"
          },
          dataType:"json",
          success: function (data){
            $("#borrows").val(data.count);
          }
        });
      },
      yes:function (index,layero){
        var phone = $.trim($("#edit-phone").val());
        var oldPhone = "${sessionScope.userInfo.phone}";
        if(phone===oldPhone){
          layer.msg("新旧手机号一致，不需要修改");
          layer.close(index);
          return false;
        }
        var rePhone = /^(13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8}$/;
        if(!(rePhone.test(phone))){
          layer.msg("请输入正确的手机号码");
          return false;
        }
        $.ajax({
          url:"${pageContext.request.contextPath}/user/updatePhone.do",
          data:{
            "id" : "${sessionScope.userInfo.id}",
            "phone" : phone
          },
          type:"post",
          dataType:"json",
          success:function (n){
            if(n.success){
              layer.msg("成功修改手机号为"+phone);
              layer.close(index);
            }else {
              layer.msg("修改手机号失败");
            }
          }
        });
      },
      end: function (res) {
        $("#showMeFrame").css("display",'none');
      }
    });

  }
  function editPassword(){
    layer.open({
      type: 1,
      area: ['600px', '260px'],
      shadeClose: true,
      title: "修改密码",
      btn:['确认','取消'],
      content: $("#editPasswordFrame"),
      success: function (index,layero){
        $("#newPassword").val("");
        $("#confPassword").val("");
      },
      yes:function (index,layero){
        var newPassword = $.trim($("#newPassword").val());
        var confPassword = $.trim($("#confPassword").val());
        if(newPassword!==confPassword){
          layer.msg("两次密码不一致，请重新输入");
          return false;
        }
        $.ajax({
          url:"${pageContext.request.contextPath}/user/updatePassword.do",
          data:{
            "id" : "${sessionScope.userInfo.id}",
            "password" : newPassword
          },
          type:"post",
          dataType:"json",
          success:function (n){
            if(n.success){
              layer.msg("修改密码成功");
              layer.close(index);
            }else {
              layer.msg("修改密码失败");
            }
          }
        });
      },
      end: function (res) {
        $("#editPasswordFrame").css("display",'none');
      }
    });

  }
</script>
</body>
<div style="display:none;" id="showMeFrame">
  <div class="layui-row" style="padding:20px;">
    <div class="layui-col-md12 layui-form layui-form-pane">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" value="${sessionScope.userInfo.username}" class="layui-input" disabled>
        </div>
        <label class="layui-form-label">性别</label>
        <div class="layui-input-inline">
          <input type="text" value="${sessionScope.userInfo.sex}" class="layui-input" disabled>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-inline">
          <input type="text" value="${sessionScope.userInfo.account}" class="layui-input" disabled>
        </div>
        <label class="layui-form-label">角色</label>
        <div class="layui-input-inline">
          <input type="text" value="${sessionScope.userInfo.role}" class="layui-input" disabled>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-inline">
          <input type="text" id="edit-phone" value="${sessionScope.userInfo.phone}" class="layui-input">
        </div>
        <label class="layui-form-label">已借图书</label>
        <div class="layui-input-inline">
          <input type="text" id="borrows" class="layui-input" disabled>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label" style="width:175px;">可借图书数量</label>
        <div class="layui-input-inline" style="width:125px;">
          <input type="text" value="${sessionScope.userInfo.borrowBookLimit}" class="layui-input" disabled>
        </div>
        <label class="layui-form-label" style="width:175px;">每次可借天数</label>
        <div class="layui-input-inline" style="width:125px;">
          <input type="text" value="${sessionScope.userInfo.borrowTimeLimit}" class="layui-input" disabled>
        </div>
      </div>
    </div>
  </div>
</div>
<div style="display:none;" id="editPasswordFrame">
  <div class="layui-row" style="padding:20px;">
    <div class="layui-col-md12 layui-form layui-form-pane">
      <div class="layui-form-item">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-block">
          <input type="password" id="newPassword" class="layui-input" placeholder="请输入新密码" autocomplete="off" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
          <input type="password" id="confPassword" class="layui-input" placeholder="请再次输入新密码" autocomplete="off" >
        </div>
      </div>
    </div>
  </div>
</div>
</html>